<template>
  <div class="box">
        <div class="top">
            <h1>选择卡面</h1>
            <img class="img1" src="/static/imgs_s02/s02_pic.png" alt="">
            <img class="img2" src="/static/imgs_s02/s02_pic01.png" alt="">
        </div>
        <div class="content">
            <h1>选择礼品</h1>
            <div class="left-right">
                <div class="left">
                    <div class="left-1">
                        <div class="jieshao">
                            <p>现金卡</p><span>50元</span>
                        </div>
                        <img src="/static/imgs_s02/s02_add.png" alt="">
                    </div>
                    <div class="left-2">
                        <div class="jieshao">
                            <p>现金卡</p><span>200元</span>
                        </div>
                        <img src="/static/imgs_s02/s02_add.png" alt="">
                    </div>
                    <div class="left-3">
                        <div class="jieshao">
                            <p>小哥哥小食套餐</p><span>29元</span>
                        </div>
                        <img src="/static/imgs_s02/s02_add.png" alt="">
                    </div>
                </div>
                <div class="right">
                    <div class="right-1">
                        <div class="jieshao">
                            <p>现金卡</p><span>100元</span>
                        </div>
                        <div class="right-a">
                            <img class="img-right-1" src="/static/imgs_s02/s02_reduce.png" alt="">
                            <img class="img-right-2" src="/static/imgs_s02/s02_add.png" alt="">
                        </div>
                    </div>
                    <div class="right-2">
                        <div class="jieshao">
                            <p>现金卡</p><span>500元</span>
                        </div>
                        <img src="/static/imgs_s02/s02_add.png.png" alt="">
                    </div>
                    <div class="right-3">
                        <div class="jieshao">
                            <p>小仙女小食套餐</p><span>50元</span>
                        </div>
                        <img src="/static/imgs_s02/s02_add.png.png" alt="">
                    </div>

                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="bottom-left">
                <span>共1份</span>
                <p>100.00</p>
            </div>
            <input type="button" value="立即购买">
        </div>

    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 100%;
            background: #F4F4F4;
        }

        .top {
            width: 375px;
        }

        h1 {
            font-size: 15px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            margin-left: 18px;
            padding-top: 23px;
        }

        .img1 {
            margin-top: 22px;
            width: 230px;
            height: 139px;
            border-radius: 9px;
            margin-left: 19px;
        }

        .img2 {
            width: 90px;
            height: 139px;
            border-radius: 9px;
            margin-left: 31px;
        }

        .content h1 {
            padding-top: 36px;
            padding-bottom: 20px;
        }

        .left-right {
            display: flex;
            flex-direction: row;
        }

        .left {
            display: flex;
            flex-direction: column;
            margin-left: 18px;
        }

        .right {
            display: flex;
            flex-direction: column;
            margin-left: 17px;
        }

        .left-2,
        .right-2 {
            margin-top: 18px;
            margin-bottom: 21px;
        }

        .left-1,
        .left-2,
        .left-3,
        .right-1,
        .right-2,
        .right-3 {
            width: 160px;
            height: 124px;
            background: rgba(255, 255, 255, 1);
            border: 0px solid rgba(238, 238, 238, 1);
            box-shadow: 0px 0px 1px 0px rgba(224, 224, 224, 0.6);
            border-radius: 9px;
        }

        .left img {
            width: 16px;
            height: 16px;
            margin-left: 63px;
            margin-top: 36px;

        }

        .right img {
            width: 16px;
            height: 16px;
            margin-left: 63px;
            margin-top: 36px;
        }

        p {
            font-size: 13px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            margin-left: 17px;
            margin-top: 23px;
            margin-bottom: 7px;
        }

        span {
            font-size: 11px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            margin-left: 17px;

        }

        .right-a {
            display: flex;
            flex-direction: row;
        }

        .right-a .img-right-1 {
            margin-left: 31px;
        }

        .right-a .img-right-2 {
            margin-left: 61px;
        }

        .bottom {
            width: 375px;
            height: 48px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 0px 0px rgba(237, 237, 237, 1);
            display: flex;
            flex-direction: row;
            margin-top: 21px;
        }

        .bottom-left {
            display: flex;
            flex-direction: column;

        }

        input {
            width: 96px;
            height: 36px;
            line-height: 36px;
            background: rgba(50, 177, 108, 1);
            box-shadow: 0px 1px 5px 0px rgba(50, 177, 108, 0.5);
            border-radius: 6px;
            margin-left: 192px;
            margin-top: 6px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ddd;

        }

      

        .bottom span {
            font-size: 11px;
            font-family: PingFang;
            font-weight: 500;
            color: rgba(136, 136, 136, 1);
            margin-top: 10px;
            margin-left: 18px;


        }

        .bottom p {
            font-size: 11px;
            font-family: DIN;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            margin-top: 7px;
            margin-left: 17px;

        }
</style>
